<template>
  <h1>1.组件的基本写法</h1>
  <button @click="addCount">修改count的值{{ count }}</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";
/* 
  wacth监视一个基本类型响应数据(ref)
    - wacth的参数
      1. 被监视的属性
      2. 回调函数,接受两个参数分别是newVal和oldVal
      3. 配置对象:immediate deep

*/
//count逻辑
let count = ref(0);
const addCount = () => {
  count.value++;
};
//监视count
watch(
  count,
  (newVal, oldVal) => {
    console.log("count的监听", newVal, oldVal);
  },
  { immediate: true }
);
</script>

<style scoped></style>
